<template>
  <el-dialog
    v-bind="$attrs"
    v-on="$listeners"
    @open="onOpen"
    @close="onClose"
    :visible.sync="dialogVisible"
    :title="dialogTitle"
  >
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-col :span="24">
          <el-row>
            <el-col :span="6">
              <el-form-item label="角色名" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入角色名"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="权限标识" prop="perms">
                <el-input
                  v-model="formData.perms"
                  placeholder="请输入权限标识"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="status">
                <el-switch v-model="status"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单" prop="menuUid">
            <el-tree
              :default-expanded-keys="formData.menuUid"
              :check-strictly="true"
              node-key="uid"
              :props="treeProp"
              :data="menuJSON"
              show-checkbox
              ref="tree"
            ></el-tree>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注" prop="remark ">
            <el-input
              v-model="formData.remark"
              type="textarea"
              placeholder="请输入多行文本"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handelConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { sendJSON } from "@/utils/request";
export default {
  inheritAttrs: false,
  components: {},
  props: {
    dialogTitle: String
  },
  mounted() {
    // 获取菜单数据
    sendJSON("/sys/menu/page", { size: 99999999 }).then(
      res => (this.menuJSON = res.data.list)
    );
  },
  data() {
    return {
      formData: {
        name: undefined,
        perms: undefined,
        status: 0,
        menuUid: [],
        remark: undefined,
        defaultChecked: []
      },
      isAdd: true,
      dialogVisible: false,
      treeProp: { label: "name", children: "child" },
      menuJSON: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入角色名",
            trigger: "blur"
          }
        ]
      },
      isAdd: false
    };
  },
  methods: {
    onOpen() {},
    onClose() {
      this.$refs["elForm"].resetFields();
    },
    close() {
      this.dialogVisible = false;
    },
    //找到父元素并返回
    familyTree(arr1, id) {
      var temp = [];
      var forFn = function(arr, id) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i];
          if (item.uid === id) {
            temp.push(item);
            forFn(arr1, item.pUid);
            break;
          } else {
            if (item.child) {
              forFn(item.child, id);
            }
          }
        }
      };
      forFn(arr1, id);
      return temp;
    },
    // 提交函数
    handelConfirm() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        let key = this.$refs.tree.getCheckedKeys();
        const total = new Set(key);
        key.forEach(k => {
          this.familyTree(this.menuJSON, k).forEach(item =>
            total.add(item.uid)
          );
        });
        this.formData.menuUid = [...total];
        console.log(this.formData.menuUid, this.formData);
        if (this.isAdd) {
          this.$emit("addHandle", this.formData);
        } else {
          this.$emit("editHandle", this.formData);
        }
      });
    }
  },
  computed: {
    status: {
      get() {
        return this.formData.status == 0 ? false : true;
      },
      set(val) {
        val ? (this.formData.status = 1) : (this.formData.status = 0);
      }
    }
  },
  watch: {
    // 获取选中的节点
    dialogVisible(newVal, oldVal) {
      console.log("发生变化", newVal, oldVal);
      if (newVal) {
        this.$nextTick(() => {
          console.log(this.$refs.tree);
          this.$refs.tree.setCheckedKeys(this.formData.menuUid);
        });
      }
    }
  }
};
</script>
<style>
.el-tree {
  max-height: 320px;
  overflow-y: scroll;
}
</style>
